<template>
	<view class="container">
		<!-- Custom Header (Non-Homepage, Logged-in State) -->
		<custom-header :isHomepage="false"></custom-header>



		<text class="page-title">修改纪念馆资料</text>

		<view class="main-content">

			<view class="section-title">填写纪念馆资料</view>

			<view class="memorial-info-form">

				<!-- 逝者姓名 -->
				<view class="form-item">
					<text class="form-label">逝者姓名:</text>
					<view class="input-wrapper">
						<input class="form-input" type="text" v-model="name" placeholder="" />
					</view>
				</view>

				<!-- 出生日期 -->
				<view class="form-item date-item">
					<text class="form-label">出生日期:</text>
					<view class="input-wrapper">
						<input class="form-input" type="text" v-model="birth_date" placeholder="" />
						<text class="input-hint date-hint">格式如:1935-05-23</text>
					</view>
				</view>

				<!-- 逝世日期 -->
				<view class="form-item date-item">
					<text class="form-label">逝世日期:</text>
					<view class="input-wrapper">
						<!-- Using input type text and value for visual match, use type="date" or picker for functionality -->
						<input class="form-input" type="text" v-model="death_date" placeholder="" />
						<!-- Hint text -->
						<text class="input-hint date-hint">格式如:2010-05-23</text>
					</view>
				</view>

				<!-- 国籍 -->
				<view class="form-item">
					<text class="form-label">国籍:</text>
					<view class="input-wrapper">
						<input class="form-input" type="text" v-model="nationality" placeholder="" /> <!-- Pre-fill sample data -->
					</view>
				</view>

				<!-- 祖籍 -->
				<view class="form-item">
					<text class="form-label">祖籍:</text>
					<view class="input-wrapper">
						<input class="form-input" type="text" v-model="ancestral" placeholder="" />
						<!-- Pre-fill sample data -->
					</view>
				</view>

				<!-- 职业 -->
				<view class="form-item">
					<text class="form-label">职业:</text>
					<view class="input-wrapper">
						<input class="form-input" type="text" v-model="career" placeholder="" /> <!-- Pre-fill sample data -->
					</view>
				</view>

				<!-- 宗教 -->
				<view class="form-item">
					<text class="form-label">宗教:</text>
					<view class="input-wrapper picker-wrapper">
						<input class="form-input" type="text" v-model="religion" placeholder="" />
					</view>
				</view>

				<!-- 情感关系 -->
				<view class="form-item">
					<text class="form-label">情感关系:</text>
					<view class="input-wrapper picker-wrapper">
						<picker mode="selector" :range="relationshipOptions" :value="relationshipIndex" style="width: 100%;"
							@change="bindRelationshipChange">
							<view class="picker-text">
								{{relationshipIndex != null && relationshipIndex != undefined ? relationshipOptions[relationshipIndex] : '请选择情感关系'}}
							</view>
						</picker>
						<text class="picker-arrow-icon">▼</text>
					</view>
				</view>

				<!-- 纪念馆别名 -->
				<view class="form-item">
					<text class="form-label">纪念馆别名:</text>
					<view class="input-wrapper">
						<input class="form-input" type="text" placeholder="" v-model="alias"/>
						<text class="input-hint">如: XXX的天堂家园</text>
					</view>
				</view>

				<!-- 墓碑祭词 -->
				<view class="form-item">
					<text class="form-label">墓碑祭词:</text>
					<view class="input-wrapper">
						<input class="form-input" type="text" v-model="sacrificial_word" placeholder="" />
						<text class="input-hint">50字以内</text>
					</view>
				</view>

				<!-- 生平简介 -->
				<!-- <view class="form-item">
					<text class="form-label">生平简介:</text>
					<view class="textarea-wrapper">
						<textarea class="form-textarea" auto-height placeholder=""
							v-model=""></textarea>
					</view>
				</view> -->

				<!-- 建馆人署名 -->
				<view class="form-item">
					<text class="form-label">建馆人署名:</text>
					<view class="input-wrapper">
						<input class="form-input" type="text" v-model="userInfo.nickname" placeholder="" disabled="true"/>
					</view>
				</view>


				<!-- Action Buttons -->
				<button class="confirm-button" @click="handleConfirmModification">提交</button>
				<text class="cancel-link" @click="handleCancel">暂不修改(返回)</text>

			</view>

		</view>
		<Footer></Footer>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import CustomHeader from '@/components/header/index.vue'; // Adjust path as needed
	import Footer from '@/components/footer/index.vue'; // Adjust path as needed
	import { apiMyMuEdit, apiMyMuDetail, apiMyMuRelation } from '@/api/graveyard'
	import { getStrictDateTimestampInSeconds } from '@/utils/common.js'
	
	// 墓地id
	const memorialId = ref()
	
	const userInfo = ref({})
	const nickname = ref('')
	const name = ref('')
	const birth_date = ref('')
	const death_date = ref('')
	const religion = ref('')
	const nationality = ref('')
	const ancestral = ref('')
	const career = ref('')
	const alias = ref('')
	const relationship = ref('');
	
	const sacrificial_word = ref('')
	const relationshipOptions = ref([]); // Sample options
	const relationshipList = ref([])
	
	const relationshipIndex = ref()

	const detailInfo = ref({})
	const formData = reactive({
		name: '',
		birth_date: '',
		death_date: '',
		avatar: '',
		relationship: '',
		religion: '',
		nationality: '',
		ancestral: '',
		career: '',
		alias: '',
		sacrificial_word: '',
	})
	

	
	
	// 情感关系选择
	const bindRelationshipChange = (e) => {
		let obj = relationshipList.value[e.detail.value]
		relationshipIndex.value = e.detail.value
		relationship.value = obj.id
	};
	
	// 提交
	const handleConfirmModification = async () => {
		// if(name.value == ''){
		// 	uni.showToast({
		// 		title: '请填写逝者姓名',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return false
		// }
		// if(birth_date.value == ''){
		// 	uni.showToast({
		// 		title: '请填写出生日期',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return false
		// }
		// if(death_date == ''){
		// 	uni.showToast({
		// 		title: '请填写逝世日期',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return false
		// }
		// if(relationship.value == ''){
		// 	uni.showToast({
		// 		title: '请选择情感关系',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return false
		// }
		// if(religion.value == ''){
		// 	uni.showToast({
		// 		title: '请填写宗教',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return false
		// }
		// if(nationality.value == ''){
		// 	uni.showToast({
		// 		title: '请填写国籍',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return false
		// }
		// if(ancestral.value == ''){
		// 	uni.showToast({
		// 		title: '请填写祖籍',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return false
		// }
		// if(career.value == ''){
		// 	uni.showToast({
		// 		title: '请填写职业',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return false
		// }
		// if(alias.value == ''){
		// 	uni.showToast({
		// 		title: '请填写纪念馆别名',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return false
		// }
		// if(sacrificial_word.value == ''){
		// 	uni.showToast({
		// 		title: '请填写墓碑祭词',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return false
		// }
		let obj = {
			name: name.value,
			// birth_date: getStrictDateTimestampInSeconds(birth_date.value),
			birth_date: birth_date.value,
			// death_date: getStrictDateTimestampInSeconds(death_date.value),
			death_date: death_date.value,
			relationship: relationship.value,
			religion: religion.value,
			nationality: nationality.value,
			ancestral: ancestral.value,
			career: career.value,
			alias: alias.value,
			sacrificial_word: sacrificial_word.value,
		}
		let params = {
			
			type: detailInfo.value.type, 
			user_id: detailInfo.value.user_id, 
			is_double: detailInfo.value.is_double,
		}
		let object = Object.assign(params,detailInfo.value, obj)
		console.log(object)
		await apiMyMuEdit(params).then(res=>{
			console.log(res)
		}).catch(error=>{
			console.log(error)
		})
	}
	
	const getMuDetail = async () => {
		await apiMyMuDetail({id: memorialId.value}).then(res=>{
			console.log(res)
			detailInfo.value = res.data
			if(!res.data.relationship || res.data.relationship == 0) {
				detailInfo.value.relationship = ''
			}else{
				let index = relationshipList.value.findIndex(item=>item.id == res.data.relationship)
				console.log('obj===============',index)
				relationshipIndex.value = index
				relationship.value = relationshipList.value[index].id
			}
			name.value = res.data.name
			birth_date.value = res.data.birth_date
			death_date.value = res.data.death_date
			religion.value = res.data.religion
			nationality.value = res.data.nationality
			ancestral.value = res.data.ancestral
			career.value = res.data.career
			alias.value = res.data.alias
			sacrificial_word.value = res.data.sacrificial_word
		}).catch(error=>{
			console.log(error)
		})
		
		
	}

	const handleCancel = () => {
		console.log('Cancel Modify clicked');
		uni.navigateBack({
			delta: 1
		}); 
	};
	
	
	// 获取情感关系
	const getRelationshipList = async () => {
		await apiMyMuRelation({page_no: 1, page_size: 9999}).then(res=>{
			console.log(res)
			if(res.code == 1){
				relationshipList.value = res.data
				res.data.forEach(item=>{
					relationshipOptions.value.push(item.title)
				})
			}
		}).catch(error=>{
			console.log(error)
		})
	}
	
	onLoad( async (options)=>{
		userInfo.value = uni.getStorageSync('userInfo')
		if(options.id){
			memorialId.value = options.id
		}
		await getRelationshipList()
		await getMuDetail()
	})
</script>

<style scoped>
	/* Scoped styles for this page */
	/* Reusing common styles from previous pages */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		/* Match background color */
		padding-bottom: 40rpx;
		/* Add some padding at the bottom */
		box-sizing: border-box;
		/* Include padding in height calculation */
	}

	/* Custom Header - Styles are in CustomHeader.vue */
	/* Need padding on main content to clear fixed header */

	/* Banner Styles - Copied from previous pages */
	.banner {
		width: 100%;
		height: 300rpx;
		/* Adjust height as needed */
		position: relative;
		overflow: hidden;
	}

	.banner-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		/* Adjust padding */
		color: #fff;
		/* Text color on banner */
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
	}

	.banner-title-area {
		display: flex;
		align-items: flex-end;
	}

	.banner-main-title {
		font-size: 50rpx;
		/* Adjust font size */
		font-weight: bold;
		margin-right: 20rpx;
	}

	.banner-sub-area {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		/* Adjust font size */
	}

	.banner-url {
		font-size: 20rpx;
		/* Adjust font size */
	}

	.banner-slogan-area {
		display: flex;
		justify-content: flex-end;
		/* Align to the right */
		font-size: 36rpx;
		/* Adjust font size */
	}

	.banner-slogan {
		margin-left: 30rpx;
		/* Spacing between slogans */
		font-weight: bold;
	}

	/* Page Title */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
		/* Space below banner */
		margin-bottom: 30rpx;
		/* Space above main content card */
		color: #333;
	}

	/* Main Content Area (White Card) */
	.main-content {
		background-color: #fff;
		/* White background */
		margin: 0 20rpx;
		/* Side margins */
		padding: 30rpx;
		/* Inner padding */
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* Subtle shadow */
		display: flex;
		flex-direction: column;
		/* No align-items: center here, form is left-aligned within card */
	}

	/* Form Section Title Styles - Copied from create memorial page */
	.section-title {
		font-size: 28rpx;
		color: #4CAF50;
		/* Green color */
		font-weight: bold;
		padding-left: 20rpx;
		/* Space for the border */
		border-left: 8rpx solid #4CAF50;
		/* Green border on the left */
		margin-bottom: 40rpx;
		/* Space below the title */
	}


	/* Memorial Info Form Styles - Reusing and adapting input styles from register/create pages */
	.memorial-info-form {
		width: 100%;
		/* Take full width within the card */
		/* No bottom margin needed, buttons/links will have spacing */
	}

	.form-item {
		margin-bottom: 30rpx;
		position: relative;
		/* Needed for absolute positioning of hints */
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		border: 1rpx solid #ddd;
		border-radius: 5rpx;
		padding: 0 20rpx;
		/* Add padding inside the input container */
		height: 80rpx;
		/* Fixed height for inputs */
	}

	.form-input {
		flex: 1;
		/* Allow input to take available space */
		height: 100%;
		/* Fill parent height */
		font-size: 28rpx;
		color: #333;
		/* Remove default input padding/appearance if any */
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0;
		/* Ensure no extra padding */
		background-color: transparent;
		/* Ensure background is transparent for wrapper border */
	}

	/* Placeholder style */
	.form-input::placeholder {
		color: #ccc;
	}

	/* Input Hint Styles - Positioned relative to the input-wrapper */
	.input-hint {
		position: absolute;
		right: 20rpx;
		/* Adjust position */
		font-size: 24rpx;
		color: #999;
		pointer-events: none;
		/* Make text non-interactive */
	}

	/* Date Input Hint Styles - Positioned above the input */
	.date-item .input-hint {
		position: absolute;
		right: 20rpx;
		/* Position relative to the input wrapper */
		top: -25rpx;
		/* Position above the input wrapper, adjust as needed */
		font-size: 22rpx;
		/* Smaller font size */
		color: #999;
		pointer-events: none;
		background-color: #fff;
		/* Background to cover potential content below */
		padding: 0 5rpx;
		/* Small padding */
		z-index: 1;
		/* Ensure it's above the input border */
	}


	/* Picker Styles - Make it look like an input with arrow */
	.picker-wrapper {
		padding: 0 20rpx;
		/* Match input padding */
		/* Border, height etc. are already handled by .input-wrapper */
	}

	.picker-text {
		flex: 1;
		/* Allow text to grow */
		height: 100%;
		/* Match wrapper height */
		line-height: 80rpx;
		/* Center text vertically */
		font-size: 28rpx;
		color: #333;
		/* Match input text color */
		text-align: left;
		/* Align text left */
		/* If showing placeholder when nothing selected: */
		/* color: #ccc; */
	}

	.picker-arrow-icon {
		/* Use actual arrow icon or font icon */
		font-size: 24rpx;
		/* Adjust size */
		color: #666;
		/* Color */
		margin-left: 10rpx;
		/* Space from text */
		flex-shrink: 0;
		/* Prevent shrinking */
	}

	/* Textarea Styles */
	.textarea-wrapper {
		border: 1rpx solid #ddd;
		border-radius: 5rpx;
		padding: 20rpx;
		/* Padding inside the textarea wrapper */
		/* Min-height might be needed, or rely on auto-height */
	}

	.form-textarea {
		width: 100%;
		/* Take full width minus padding */
		font-size: 28rpx;
		color: #333;
		/* Uniapp textarea has default padding/margin, might need override */
		padding: 0;
		/* Remove default padding */
		margin: 0;
		/* Remove default margin */
		box-sizing: border-box;
		/* Include padding/border in width/height */
		background-color: transparent;
	}


	/* Action Button Styles */
	.confirm-button {
		/* Orange button style - same as Submit button on register */
		width: 100%;
		/* Take full width */
		height: 90rpx;
		/* Button height */
		line-height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #ff9800;
		/* Orange color */
		border: none;
		border-radius: 8rpx;
		text-align: center;
		margin-top: 40rpx;
		/* Space above button */
		margin-bottom: 30rpx;
		/* Space below button */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel-link {
		display: block;
		/* Make it a block element for margin */
		text-align: center;
		font-size: 28rpx;
		color: #999;
		/* Gray color */
		text-decoration: none;
		/* Remove underline if needed */
		margin-top: 10rpx;
		/* Space above link */
	}


	/* QR Codes Section - Copied from previous pages */
	.qr-codes-section {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 0;
		/* Vertical padding */
		margin-top: 30rpx;
		/* Space above section */
		margin-left: 20rpx;
		/* Side margins to align with card */
		margin-right: 20rpx;
	}

	.qr-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qr-image {
		width: 200rpx;
		height: 200rpx;
		/* Need actual images */
		background-color: #eee;
		/* Placeholder background */
	}

	.qr-label {
		font-size: 26rpx;
		color: #555;
		margin-top: 10rpx;
	}

	/* Footer Styles - Copied from previous pages */
	.footer {
		margin-top: 40rpx;
		padding: 40rpx 20rpx;
		background-color: #f0f0f0;
		/* Light gray background */
		text-align: center;
		margin-top: auto;
		/* Push footer to the bottom */
		box-sizing: border-box;
	}

	.footer-links {
		font-size: 26rpx;
		color: #555;
		margin-bottom: 20rpx;
	}

	.footer-links text {
		margin: 0 10rpx;
	}

	.footer-copyright {
		font-size: 22rpx;
		color: #888;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer-copyright text {
		margin-bottom: 5rpx;
	}

	/* Padding to clear the fixed header */
	.page-content-wrapper {
		padding-top: 88rpx;
		/* Height of the fixed header */
		flex: 1;
		/* Allow content to take space */
		display: flex;
		flex-direction: column;
	}
</style>